<template>
  <div class="author-item">
    <img v-if="haveAvatar" :src="avatar" alt="author-avatar">
    <a :href="`/#/author/${authorId}`" :title="`Author: ${name}`" class="regular-link">{{name}}</a>
  </div>
</template>

<script>
export default {
  name: "AuthorItem",
  props: {
    author: Object,
  },
  data(){
    return {
      haveAvatar: true
    }
  },
  computed: {
    avatar() {
      return this.author.avatar ?? '';
    },
    authorId() {
      if (!this.author.hasOwnProperty('avatar')) {
        this.haveAvatar = false;
      }
      return this.author.authorId;
    },
    name() {
      return this.author.name;
    }
  },
  mounted() {
    
  }
};
</script>

<style scoped lang="scss">
.author-item{
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  img {
    height: 24px;
    // width: 24px;
    background-size: contain;
    margin-right: 5px;
  }
  a {
    color: rgb(126, 126, 126);
    text-decoration: underline;
    margin-right: 10px;
    font-size: 14px;
    font-family: 'Merriweather Sans', sans-serif;

    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}
</style>
